<template>
    <div id="app">
        网关名称<el-input v-model="searchName" placeholder="请输入网关" style="width: 200px;"></el-input>
        <el-button type="primary" style="height: 35px;" @click="search"><i class="el-icon-search">搜索</i></el-button>
        <el-button style="height: 35px;" @click="reset"><i class="el-icon-refresh">重置</i></el-button>
        <div style="margin-top: 10px;">
            <br>
            <el-button type="primary" style="height: 35px;" @click.native="addGatewayValue"><i
                    class="el-icon-plus">新增网关</i></el-button>
        </div>
        <el-table :data="gatewayList">
            <el-table-column prop="id" label="序号" width="160px"> </el-table-column>
            <el-table-column prop="name" label="网关名称" width="180px"> </el-table-column>
            <el-table-column prop="gatewayNo" label="网关序列号" width="180px"> </el-table-column>
            <el-table-column prop="gatewayIp" label="网关IP" width="180px">
            </el-table-column>
            <el-table-column prop="port" label="网关端口" width="180px">
            </el-table-column>
            <el-table-column prop="status" label="网关状态" width="180px">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.status == 0" type="danger">离线</el-tag>
                    <el-tag v-if="scope.row.status == 1" type="success">在线</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="入网时间" width="160px"> </el-table-column>
            <el-table-column label="操作" width="150px">
                <template slot-scope="scope">
                    <el-tooltip effect="dark" content="刷新状态" placement="top">
                        <el-button type="primary" icon="el-icon-refresh" size="mini" circle
                            @click="refresh(scope.row)"></el-button>
                    </el-tooltip>
                    <el-tooltip effect="dark" content="修改" placement="top">
                        <el-button type="primary" icon="el-icon-edit" size="mini" circle
                            @click="upd(scope.row)"></el-button>
                    </el-tooltip>
                    <el-tooltip effect="dark" content="删除" placement="top">
                        <el-button type="danger" icon="el-icon-delete" size="mini" circle
                            @click="del(scope.row.id)"></el-button>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
        <div style="margin-top: 30px;margin-left: 1150px;" v-if="pageCount >= 1">
            <el-button-group>
                <el-button type="primary" icon="el-icon-arrow-left" @click="prevPage">上一页</el-button>
                <el-button><span>{{ pageNum }} / {{ pageCount }}</span></el-button>
                <el-button type="primary" @click="nextPage">下一页<i
                        class="el-icon-arrow-right el-icon--right"></i></el-button>
            </el-button-group>
        </div>

        <el-row v-if="addGateway">
            <el-dialog title="编辑网关信息" :visible.sync="addGateway" width="60%">
                <el-form label-width="100px" class="demo-ruleForm" style="height: 430px;">
                    <div style="display: flex; gap: 60px;margin-left: 22px;height: 80px;">
                        <div style="flex: 1;">
                            <span style="color: red;">*</span>
                            网关名称 <el-input v-model="name" style="width: 300px;"></el-input>
                        </div>
                        <div style="flex: 1;margin-right: 5px;">
                            网关序列号 <el-input v-model="gateway_no" style="width: 300px;"></el-input>
                        </div>
                    </div>
                    <div style="display: flex; gap: 60px;margin-left: 22px;height: 80px;">
                        <div style="flex: 1;">
                            <span style="color: red;">*</span>
                            网关IP <el-input v-model="gateway_ip" style="width: 300px;"></el-input>
                        </div>

                        <div style="flex: 1;">
                            <span style="color: red;">*</span>
                            网关端口 <el-input v-model="port" style="width: 300px;"></el-input>
                        </div>
                    </div>
                    <div style="display: flex; gap: 60px;margin-left: 22px;height: 80px;">
                        <div style="flex: 1;">
                            账号 <el-input v-model="account" style="width: 300px;"></el-input>
                        </div>
                        <div style="flex: 1;">
                            密码
                            <el-input v-model="pwd" style="width: 300px;"></el-input>
                        </div>

                    </div>
                    <div style="display: flex; gap: 60px;margin-left: 22px;height: 80px;">
                        <div style="flex: 1;">
                            心跳包内容
                            <el-input v-model="heart_beat" style="width: 700px;"></el-input>
                        </div>
                    </div>
                    <div style="display: flex;gap: 10px;position: absolute;right: 20px;bottom: 0;height: 50px;">
                        <span slot="footer" class="dialog-footer">
                            <el-button type="primary" @click="add">确定</el-button>
                            <el-button @click="addGateway = false">取 消</el-button>
                        </span>
                    </div>
                </el-form>
            </el-dialog>
        </el-row>
        <el-row v-if="updGateway">
            <el-dialog title="编辑网关信息" :visible.sync="updGateway" width="60%">
                <el-form label-width="100px" class="demo-ruleForm" style="height: 430px;">
                    <div style="display: flex; gap: 60px;margin-left: 22px;height: 80px;">
                        <div style="flex: 1;">
                            <span style="color: red;">*</span>
                            网关名称 <el-input v-model="name" style="width: 300px;"></el-input>
                        </div>
                        <div style="flex: 1;margin-right: 5px;">
                            网关序列号 <el-input v-model="gateway_no" style="width: 300px;"></el-input>
                        </div>
                    </div>
                    <div style="display: flex; gap: 60px;margin-left: 22px;height: 80px;">
                        <div style="flex: 1;">
                            <span style="color: red;">*</span>
                            网关IP <el-input v-model="gateway_ip" style="width: 300px;"></el-input>
                        </div>

                        <div style="flex: 1;">
                            <span style="color: red;">*</span>
                            网关端口 <el-input v-model="port" style="width: 300px;"></el-input>
                        </div>
                    </div>
                    <div style="display: flex; gap: 60px;margin-left: 22px;height: 80px;">
                        <div style="flex: 1;">
                            账号 <el-input v-model="account" style="width: 300px;"></el-input>
                        </div>
                        <div style="flex: 1;">
                            密码
                            <el-input v-model="pwd" style="width: 300px;"></el-input>
                        </div>

                    </div>
                    <div style="display: flex; gap: 60px;margin-left: 22px;height: 80px;">
                        <div style="flex: 1;">
                            心跳包内容
                            <el-input v-model="heart_beat" style="width: 700px;"></el-input>
                        </div>
                    </div>
                    <div style="display: flex;gap: 10px;position: absolute;right: 20px;bottom: 0;height: 50px;">
                        <span slot="footer" class="dialog-footer">
                            <el-button type="primary" @click="updGatewayById">确定</el-button>
                            <el-button @click="updGateway = false">取 消</el-button>
                        </span>
                    </div>
                </el-form>
            </el-dialog>
        </el-row>
    </div>
</template>
<script>
import axios from 'axios';
export default {
    name: 'app',
    data() {
        return {
            searchName:'',
            id: '',
            name: '',
            gateway_no: '',
            gateway_ip: '',
            port: '',
            account: '',
            pwd: '',
            heart_beat: '',
            gatewayList: [],
            pageNum: 1,
            pageSize: 5,
            pageCount: '',
            addGateway: false,
            sysGateway: {},
            updGateway: false,
        }
    },
    created() {
        this.getSysGatewayList(1);
    },
    methods: {
        addGatewayValue() {
            this.id = '';
            this.name = '';
            this.gateway_no = '';
            this.gateway_ip = '';
            this.port = '';
            this.account = '';
            this.pwd = '';
            this.heart_beat = '';
            this.addGateway = true;
        },
        prevPage() {
            this.pageNum--;
            var pageNum = this.pageNum;
            if (this.pageNum >= 1) {
                this.getFaceRecordList(pageNum);
            } else {
                this.getFaceRecordList(1);
            }
        },
        nextPage() {
            this.pageNum++;
            var pageNum = this.pageNum;
            if (this.pageNum <= this.pageCount) {
                this.getFaceRecordList(pageNum);
            } else {
                this.getFaceRecordList(this.pageCount);
            }
        },
        search(){
            this.getSysGatewayList(1);
        },
        reset(){
            this.searchName = '';
            this.getSysGatewayList(1);
        },
        getSysGatewayList(pageNum) {
            let Authorization = localStorage.getItem("Authorization");
            this.pageNum = pageNum;
            axios({
                url: 'http://localhost:9002/sys/gateway/getSysGatewayList',
                method: 'post',
                params: {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    name: this.searchName
                },
                headers: {
                    'Authorization': Authorization,
                }
            })
                .then(response => {
                    this.gatewayList = response.data.data.sysGatewayList;
                    this.pageCount = response.data.data.pageCount;
                    console.log(this.gatewayList);
                })
        },
        add() {
            if (this.name == "") {
                this.$message.error("网关名称不能为空！");
                return;
            }
            if (this.gateway_no == "") {
                this.$message.error("网关序列号不能为空！");
                return;
            }
            if (this.gateway_ip == "") {
                this.$message.error("网关IP不能为空！");
                return;
            }
            if (this.port == "") {
                this.$message.error("网关端口不能为空！");
                return;
            }
            if (this.heart_beat == "") {
                this.$message.error("心跳包内容不能为空！");
                return;
            }
            let Authorization = localStorage.getItem("Authorization");
            axios({
                url: 'http://localhost:9002/sys/gateway/addSysGateway',
                method: 'post',
                data: {
                    name: this.name,
                    gatewayNo: this.gateway_no,
                    gatewayIp: this.gateway_ip,
                    port: this.port,
                    account: this.account,
                    pwd: this.pwd,
                    heartBeat: this.heart_beat
                },
                headers: {
                    'Authorization': Authorization,
                }
            })
                .then(response => {
                    if (response.data.status == 200) {
                        this.$message.success("新增成功！");
                        this.addGateway = false;
                        this.getSysGatewayList(1);
                    } else {
                        this.$message.error("新增失败！");
                    }
                })
        },
        upd(row) {
            this.sysGateway = row;
            this.updGateway = true;
            this.name = row.name;
            this.gateway_no = row.gatewayNo;
            this.gateway_ip = row.gatewayIp;
            this.port = row.port;
            this.account = row.account;
            this.pwd = row.pwd;
            this.heart_beat = row.heartBeat;
            this.id = row.id;
        },
        updGatewayById(){
            if (this.name == "") {
                this.$message.error("网关名称不能为空！");
                return;
            }
            if (this.gateway_no == "") {
                this.$message.error("网关序列号不能为空！");
                return;
            }
            if (this.gateway_ip == "") {
                this.$message.error("网关IP不能为空！");
            }
            if (this.port == "") {
                this.$message.error("网关端口不能为空！");
                return;
            }
            if (this.heart_beat == "") {
                this.$message.error("心跳包内容不能为空！");
                return;
            }
            let Authorization = localStorage.getItem("Authorization");
            axios({
                url: 'http://localhost:9002/sys/gateway/updGatewayById',
                method: 'post',
                data: {
                    id: this.id,
                    name: this.name,
                    gatewayNo: this.gateway_no,
                    gatewayIp: this.gateway_ip,
                    port: this.port,
                    account:this.account,
                    pwd: this.pwd,
                    heartBeat: this.heart_beat,
                },
                headers: {
                    'Authorization': Authorization,
                }
            })
            .then(response => {
                if (response.data.status == 200) {
                    this.$message.success("修改成功！");
                    this.updGateway = false;
                    this.getSysGatewayList(1);
                } else {
                    this.$message.error("修改失败！");
                }
            })
        },
        del(id){
            let Authorization = localStorage.getItem("Authorization");
            axios({
                url: 'http://localhost:9002/sys/gateway/delGatewayById',
                method: 'post',
                params: {
                    id: id
                },
                headers: {
                    'Authorization': Authorization,
                }
            })
            .then(response => {
                if (response.data.status == 200) {
                    this.$message.success("删除成功！");
                    this.getSysGatewayList(1);
                }else {
                    this.$message.error("删除失败！");
                }
            })
        }
    }
}
</script>